<div class="main">
    <mat-card data-cy="image-info" *ngFor="let image of images">
        <mat-card-header class="colored-title">
            <mat-card-title>{{image.name}}</mat-card-title>
            <mat-card-subtitle>Image</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            <table class="aligned">
                <tr data-cy="image-build-startup">
                    <td>Build at Startup:</td>
                    <td *ngIf="image.autoBuild == 'always'"><code>Yes, forced</code></td>
                    <td *ngIf="image.autoBuild == 'undefined' && image.orphan"><code>Yes, the image is not referenced by any command</code></td>
                    <td *ngIf="image.autoBuild == 'undefined' && !image.orphan"><code>No, the image is referenced by a command</code></td>
                    <td *ngIf="image.autoBuild == 'never'"><code>No, disabled</code></td>
                </tr>
                <tr>
                    <td>Image Name:</td>
                    <td><code>{{image.imageName}}</code></td>
                </tr>
                <tr>
                    <td>Dockerfile URI:</td>
                    <td><code>{{image.uri}}</code></td>
                </tr>
                <tr *ngIf="image.args != null && image.args.length > 0">
                    <td>Build Args:</td>
                    <td><code>{{image.args}}</code></td>
                </tr>
                <tr>
                    <td>Build Context:</td>
                    <td><code>{{image.buildContext}}</code></td>
                </tr>
                <tr>
                    <td>Root Required:</td>
                    <td><code>{{image.rootRequired ? "Yes" : "No"}}</code></td>
                </tr>
            </table>
        </mat-card-content>

        <mat-card-actions>
            <button mat-button color="warn" (click)="delete(image.name)">Delete</button>
            <button data-cy="image-edit" mat-button (click)="edit(image)">Edit</button>
        </mat-card-actions>

    </mat-card>

    <app-image
        *ngIf="forceDisplayForm || images == undefined || images.length == 0"
        [cancelable]="forceDisplayForm"
        (canceled)="undisplayAddForm()"
        (created)="onCreated($event)"
        [image]="editingImage"
        (saved)="onSaved($event)"
    ></app-image>
</div>

<ng-container *ngIf="!forceDisplayForm && images != undefined && images.length > 0">
    <button class="fab" mat-fab color="primary" (click)="displayAddForm()">
        <mat-icon class="material-icons-outlined">add</mat-icon>
    </button>
</ng-container>
